<template>
	<diy-page>
		<veiw style="position: sticky; top: 0;background: #555;z-index: 1000000;">
			<block v-for="(item, index) in pageConfig" :key="index">
				<diy-menu-header v-if="item.component == 'diy-menu-header'" />
				<diy-notice-bar v-else-if="item.component == 'diy-notice-bar'" :noticeList="noticeList" />
			</block>
		</veiw>
		<block v-for="(item, index) in pageConfig" :key="index">
			<diy-banner class="child" v-if="item.component == 'diy-banner'" />
			<diy-menu v-else-if="item.component == 'diy-menu1'"  @upTouch="hanldUpTouch" @downTouch="hanldDownTouch" />
		</block>
		<view @click="test" style="height: 1000px;background: #777;"> 88888</view>
		
	</diy-page>
</template>

<script setup>
	import DiyMenu from '@/diy/diy-menu/diy-menu.vue'
	import DiyBanner from '@/diy/diy-banner/diy-banner.vue'
	import DiyPage from '@/diy/diy-page/diy-page.vue';
	import DiyMenuHeader from '@/diy/diy-menu-header/diy-menu-header.vue';
	import DiyNoticeBar from '@/diy/diy-notice-bar/diy-notice-bar.vue';
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';

	const stickyHeight = ref(0);

	onMounted(() => {
		const query = uni.createSelectorQuery().in(this);
		query.select('.child').boundingClientRect(parentRes => {
			stickyHeight.value = parentRes.bottom + uni.getSystemInfoSync().statusBarHeight
		}).exec();
	})
	
	const test = () =>{
		console.log("ddd");
		uni.pageScrollTo({
			scrollTop: stickyHeight.value,
			duration: 300,
		});
	}

	const pageConfig = ref([{
			component: 'diy-menu-header',
			assemblyProps: {},
		}, {
			component: 'diy-notice-bar',
			assemblyProps: {},
		},
		{
			component: 'diy-banner',
			assemblyProps: {},
		},
		{
			component: 'diy-menu',
			assemblyProps: {},
		}
	]);

	const noticeList = ref([{
			id: 1,
			title: '征程这些伟大精神 串连起中国***人的精神谱系连起中国***人的精神谱连起中国***人的精神谱连起中国***人的精神谱'
		},
		{
			id: 2,
			title: '增强水运发展新动能 前5月港口货物吞吐量增长7.9%'
		},
		{
			id: 3,
			title: '多地持续高温 各地采取措施积极应对'
		},
		{
			id: 4,
			title: '中非经贸博览会见证中非合作深度'
		},
		{
			id: 5,
			title: '国安家安得民心 保驾护航促治兴'
		}
	]);

	const hanldUpTouch = () => {
		console.log("up");

		uni.pageScrollTo({
			scrollTop: stickyHeight.value,
			duration: 300,
		});
	}

	const hanldDownTouch = () => {
		console.log("down");

		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300,
		});
	}

	onShow(() => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300,
		});
	});
</script>

<style lang="scss" scoped>
	.fade-slide-enter-active,
	.fade-slide-leave-active {
		transition: all 0.5s ease;
	}

	.fade-slide-enter {
		opacity: 0;
		transform: translateX(50px);
		/* 进入时从右侧滑入 */
	}

	.fade-slide-leave-to {
		opacity: 0;
		transform: translateX(-50px);
		/* 离开时向左滑出 */
	}

	.animated-box {
		width: 200px;
		height: 200px;
		background: #4fc08d;
		margin-top: 20px;
	}
</style>